<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-radio-group v-model="depart" @change="setDepart">
                    <el-radio v-for="depart in departs" :label="depart.depart_id" size="large"
                        border>{{depart.depart_name}}</el-radio>
                </el-radio-group>
                <el-button type="primary" @click="openPage">打开页面</el-button>
            </div>
        </div>
        <div style="margin-top: 5px;">
            <iframe :src="url" frameborder="0" style="width: 100%;height: 83vh;"></iframe>
        </div>
    </div>
</template>

<script>
    import { ref, reactive } from "vue";
    import { ElMessage, ElMessageBox } from "element-plus";
    import { departUser } from "../api/index";
    import { typeName, log } from "../utils/user"

    export default {
        name: "basetable",
        setup() {
            const url = ref('');
            let defaultUrl = process.env.NODE_ENV === 'development'
                ? 'http://127.0.0.1:8000' 
                : window._api;
            defaultUrl = defaultUrl + '/index.php/dell/'

            const departs = ref('[]');
            const depart = ref(0)

            // 获取表格数据
            const getData = () => {
                departUser({}).then((res) => {
                    if (res.status == 'ok') {
                        departs.value = res.data;
                        depart.value = departs.value[0]['depart_id'];
                        url.value = defaultUrl + depart.value
                    } else {
                        ElMessage.error(res.msg)
                        return false;
                    }
                });
            };
            getData();
            const setDepart = () => {
                url.value = defaultUrl  + depart.value
            }

            const openPage = () => {
                window.open(url.value)
            }

            return {
                url,
                departs,
                depart,
                setDepart,
                openPage
            };
        },
    };
</script>

<style scoped>
    .handle-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }

    .table {
        width: 100%;
        font-size: 14px;
    }

    .red {
        color: #ff0000;
    }

    .mr10 {
        margin-right: 10px;
    }

    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }

    .m-radio {
        margin: 12px;
    }
</style>